<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>自定义指令</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<!--
    需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
    需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
-->
<body>
<div id="root">
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
    <button @click="n++">点我n+1</button>
    <hr/>
    <input type="text" v-fbind:value="n">
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            n: 1
        },
        //自定义指令
        directives: {
            //函数实现方式:
            //big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时
            big(element, binding) { // 节点值element作为第一个参数传递上来,第二个binding是该自定义指令后等号的值
                console.log('big被调用,this的值为', this, element, binding)//注意此处的this是window
                //操作节点
                element.innerText = binding.value * 10
            },

            //对象实现方式:
            fbind: {
                //指令与元素成功绑定时调用
                bind(element, binding) {
                    element.value = binding.value
                },
                //指令所在元素被插入页面时调用
                inserted(element, binding) {
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value
                }
            }
        }
    })

    /**
     *
     * 自定义过程当中对dom元素的操作都需要自己操作  指令是不能脱离元素存在的
     *
     *自定义指令定义语法:
     *  1,局部指令(只有在当前vue对象实例中能使用)
     *      new Vue({
     *          directives:(
     *          函数形式:指令名(){}
     *          对象形式:指令名:配置对象
     *          )
     *      })
     *  自定义指令不是考返回值,是通过修改element节点
     *  通过函数实现的自定义指令会在:1.指令与元素成功绑定时 2.指令所在的模板被重新解析时 被调用
     *  通过对象实现的自定义指令可以自己选择在 不同时机对节点进行不同操作:1.成功绑定时:bind  2.所在元素被插入页面时调用inserted  3.指令所在模板被重新解析时update
     *          bind(element,binding)：指令与元素成功绑定时调用
     *          inserted(element,binding)：指令所在元素被插入页面时调用
     *          update(element,binding)：指令所在模板结构被重新解析时调用
     *
     *全局指令:
     *  Vue.directive(指令名,配置对象)
     *  Vue.directive(指令名,函数)
     *
     *备注:
     *  指令定义时不加“v-”，但使用时要加“v-”
     *  指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
     */
</script>
</html>

